<template>
  <div>
    <CustomDialog
      title="新增/编辑企业"
      width="900px"
      :visible.sync="isShowDialog"
      @closed="handleCloseDialog"
    >
      <el-form
        ref="ruleForm"
        v-loading="loading"
        :model="form"
        :rules="rules"
        label-position="left"
        hide-required-asterisk
      >
        <div class="h1 mt-0">基本信息</div>
        <!-- 企业名称 -->
        <el-form-item label="" prop="name" class="row-left">
          <template #label>
            <div class="form-label required">企业名称</div>
          </template>

          <el-select
            v-model="form.name"
            class="w-full"
            filterable
            remote
            allow-create
            placeholder="请输入企业名称"
            :remote-method="remoteMethod"
            :loading="nameLoading"
            @change="handleNameChange"
          >
            <el-option
              v-for="item in companyNameOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!--统一社会信用代码 -->
        <el-form-item label="" prop="uniCode" class="row-right">
          <template #label>
            <div class="form-label required">信用代码</div>
          </template>
          <el-input v-model="form.uniCode" placeholder="请输入"></el-input>
        </el-form-item>
        <!-- 是否归上企业 -->
        <el-form-item label="" prop="contacts" class="row-left">
          <template #label>
            <div class="form-label required">规上企业</div>
          </template>
          <el-select v-model="form.isTop" class="w-full">
            <el-option
              v-for="item in topOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 企业标签 -->
        <el-form-item label="" prop="tags" class="row-right">
          <template #label>
            <div class="form-label required">企业标签</div>
          </template>
          <el-select v-model="form.tags" class="w-full">
            <el-option
              v-for="item in tagsOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 产业标签 -->
        <el-form-item label="" prop="industry" class="row-left">
          <template #label>
            <div class="form-label">产业标签</div>
          </template>
          <el-cascader
            id="industry"
            ref="industry"
            v-model="form.industry"
            class="w-full"
            clearable
            filterable
            placeholder="行业，支持模糊搜索、选择"
            :options="industryTree"
            :props="{
              checkStrictly: true,
              multiple: true,
              value: 'code',
              label: 'name',
            }"
          ></el-cascader>
        </el-form-item>

        <!-- 企业地址 -->
        <el-form-item label="" prop="addrs" class="row-right">
          <template #label>
            <div class="">企业地址</div>
          </template>
          <el-input v-model="form.addrs" placeholder="点击右侧按钮在地图上选点">
            <i
              slot="suffix"
              class="el-icon-location-outline text-2xl pr-1 pt-[4px] cursor-pointer"
              @click="isShowMap = true"
            />
          </el-input>
        </el-form-item>

        <!-- 物业租售类型 -->
        <el-form-item label="" prop="sellType" class="row-left">
          <template #label>
            <div class="form-label required">物业租售类型</div>
          </template>
          <el-select v-model="form.sellType" class="w-full">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 物业租售面积 -->
        <el-form-item label="" prop="area" class="row-right">
          <template #label>
            <div class="form-label">物业租售面积</div>
          </template>
          <el-input v-model="form.area" placeholder="请输入">
            <template slot="append">平米</template>
          </el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button class="rounded-content-wrap" @click="isShowDialog = false">取 消</el-button>
        <el-button class="rounded-content-wrap" type="primary" @click="handleOk">确 定</el-button>
      </span>
    </CustomDialog>

    <PositionPicker
      :visible.sync="isShowMap"
      :position.sync="form.position"
      :addrs.sync="form.addrs"
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import {
  topOptions,
  tagsOptions,
  typeOptions,
} from '@/components/admin/manage/carrier/common/dictionary'
import CustomDialog from '@/components/admin/manage/carrier/common/CustomDialog/index.vue'
import PositionPicker from '@/components/admin/manage/carrier/common/CustomAMap/PositionPicker.vue'
import addEditMixin from '@/components/admin/manage/carrier/common/addEditMixin'
import { getCpyListByName } from '@/api/policy'
// import { pageList } from '@/api/commonInstance'
// import { DBNames } from '@/enum/dbName'
const treeKey = [{ key: 'industry', refName: 'industry' }]
const selectKey = [
  { key: 'isTop', options: 'topOptions' },
  { key: 'tags', options: 'tagsOptions' },
  { key: 'sellType', options: 'typeOptions' },
]
export default Vue.extend({
  components: { CustomDialog, PositionPicker },
  mixins: [addEditMixin({ selectKey, treeKey, templateName: 'B_CONSOLE_COMPANY' })],
  data() {
    return {
      form: {
        name: '',
        uniCode: '', // 企业代码
        isTop: '', // 是否归上
        tags: '', // 企业标签
        addrs: '',
        industry: '',
        sellType: '',
        area: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入项目标题', trigger: 'blur' },
          { min: 3, max: 20, message: '长度为3~20个字符', trigger: 'blur' },
        ],
        type: [{ required: true, message: '请选择项目类型', trigger: 'change' }],
        areaCovered: [{ required: true, message: '请输入占地面积', trigger: 'blur' }],
        investment: [{ required: true, message: '请输入拟投资额', trigger: 'blur' }],
        highlight: [{ required: true, message: '请输入项目亮点', trigger: 'blur' }],
        needs: [{ required: true, message: '请输入项目需求', trigger: 'blur' }],
      },
      companyNameOptions: [],
      topOptions,
      tagsOptions,
      typeOptions,

      // nameLoading: false,
    }
  },
  methods: {
    handleNameChange(name) {
      const obj = this.companyNameOptions.find((d) => d.label === name)
      this.form.uniCode = obj?.creditCode || ''
    },
    async remoteMethod(queryString) {
      if (queryString.trim() !== '') {
        this.nameLoading = true
        const res = await getCpyListByName(queryString.trim())
        console.log('%c [ res ]-308', 'font-size:13px; background:pink; color:#bf2c9f;', res)
        this.companyNameOptions = res.list?.map((d) => ({
          label: d.name,
          value: d.name,
          creditCode: d.creditCode,
          legalPersonName: d.legalPersonName,
        }))
        this.nameLoading = false
      } else {
        this.companyNameOptions = []
      }
    },
  },
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/form.scss';
</style>
